<template>
  <div class="customer-detail">
    <div class="head-nav">
      <a href="javascript:;" @click="$router.push({name: 'CustomerDetail', params: {sid: ssoid}})">会员详情</a>
      <a href="javascript:;" class="cur" @click="$router.push({name: 'CustomerOrderDetail', params: {sid: ssoid}})">交易记录</a>
      <!-- <a href="javascript:;" :class="{ cur : axisVisible }" @click="handleSwitchNav(2)">时间轴</a> -->
    </div>
    <div class="record-wrap">
      <h2 class="animated fadeInUp">交易<span class="tips" @click="showTips=true">说明<i class="icon icon-wenhao"></i></span></h2>
      <div class="summary clearfix">
        <section>
          <p>{{recordDetail.sumNum}}/{{toDemical(recordDetail.sumPrice)}}</p>
          <p>总订单数/订单金额</p>
        </section>
        <section>
          <p>{{recordDetail.aveMonNum}}/{{toDemical(recordDetail.aveMonPrice)}}</p>
          <p>平均每月订单数/平均每月订单金额</p>
        </section>
        <section>
          <p>{{toDemical(recordDetail.avePrice)}}</p>
          <p>平均订单金额</p>
        </section>
        <section>
          <p>{{recordDetail.lastDays}}天</p>
          <p>距离最近一次购买</p>
        </section>
        <section>
          <p>{{recordDetail.buyPeriod}}天</p>
          <p>平均回购周期</p>
        </section>
      </div>
      <div class="sum-table">
        <p class="import-time" v-if="importTime">最近导入时间：{{$date.format(recordTable.lastImportTime, 'YYYY-MM-DD HH:mm:ss')}}</p>
        <p class="import-time" v-else>最近导入时间：暂无导入</p>
        <el-col class="btn-imex">
          <a :href="baseUrl+'/customer/fans/order/exportmodel'" download class="btn-download">下载模板</a>
          <el-upload
            ref="upload" 
            :headers="headers"
            :action="baseUrl+'/customer/fans/order/import/'+ ssoid"
            :on-remove="handleRemove"
            :on-success="handleImport"
            :auto-upload="true"
            class="btn-import">
            <el-button type="primary" size="small" plain>导入客户订单</el-button>
          </el-upload>
          <a :href="baseUrl+'/customer/fans/order/exportinfor/'+ ssoid + '?__token=' + headers.UBToken" download class="btn-export">导出客户订单</a>
        </el-col>
        <!-- <el-button type="text" @click="handleExport" class="btn-imex">导出客户订单</el-button> -->
        <el-table :data="recordTable.list" v-loading="tbLoading" element-loading-text="拼命加载中" border style="width: 100%">
          <el-table-column className="is-center" label="下单平台">
            <!-- <template slot-scope="scope">{{scope.row.title || '营销标题'}}</template> -->
            <template slot-scope="scope">
              {{scope.row.orderPlatform}}
            </template>
          </el-table-column>
          <el-table-column className="is-center" label="订单号">
            <template slot-scope="scope">
              {{scope.row.orderId}}
            </template>
          </el-table-column>
          <el-table-column className="is-center" label="下单时间">
            <template slot-scope="scope">{{$date.format(scope.row.orderTime, 'YYYY-MM-DD HH:mm:ss')}}</template>
          </el-table-column>
          <el-table-column className="is-center" label="商品名称/数量">
            <template slot-scope="scope">{{scope.row.productCount}}</template>
          </el-table-column>
          <el-table-column className="is-center" label="订单总额">
            <template slot-scope="scope">{{toDemical(scope.row.orderAmount)}}</template>
          </el-table-column>
          <el-table-column className="is-center" label="商品SN码">
            <template slot-scope="scope">{{scope.row.productSNCode}}</template>
          </el-table-column>
          <el-table-column className="is-center" label="收件人">
            <template slot-scope="scope">{{scope.row.receiver}}</template>
          </el-table-column>
          <el-table-column className="is-center" label="联系电话">
            <template slot-scope="scope">{{scope.row.mobile}}</template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            :current-page.sync="recordTable.page.current"
            :page-size.sync="recordTable.page.size"
            layout="total, sizes, prev, pager, next"
            :page-sizes="[10, 30, 50, 100]"
            :total= "recordTable.page.total"
            @current-change="handleSearchCount"
            @size-change="handleResSizeChange">
          </el-pagination>
        </div>
      </div>
      <!-- 导入excel数据弹窗 -->
      <el-dialog
        title="导入结果"
        width="30%"
        :visible.sync="importResVis"
        class="import-result"
      >
        <span class="sp">成功：{{importSuccess}}个<br />失败：{{importFail}}个</span>
        <a v-if="importFail" :href="baseUrl+'/customer/fans/order/import/error/list?key=' + importFailKey + '&__token=' + headers.UBToken" download class="btn-primary">下载失败列表</a>
        <span slot="footer" class="dialog-footer">
          <el-button @click="importResVis = false">取 消</el-button>
          <el-button type="primary" @click="importResVis = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 交易数据说明弹层 -->
      <el-dialog
        title="说明"
        width="30%"
        :visible.sync="showTips"
        custom-class="dialog_tips">
        <p>
          总订单数=导入的该客户的所有订单数之和<br>
          总订单金额=导入的该客户的所有订单金额之和<br>
          平均每月订单数=总订单数 / 第一个订单距当前时间的总月份<br>
          平均每月订单金额=总订单金额 /第一个订单距当前时间的总月份<br>
          平均订单金额=总订单金额/总订单数<br>
          距离最近一次购买时间=最近一次购买时间距当前日期的天数<br>
          平均回购周期=所有订单下单相距的天数/（订单数-1）
        </p>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showTips=false">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import cusNav from '@/components/common/cusManage/customerNav'
  import env from '@/config/env'
  export default {
    components: {cusNav},
    data () {
      return {
        baseUrl: env.baseUrl2,
        tbLoading: false,
        recordDetail: [],
        importTime: false,
        recordTable: {
          lastImportTime: '暂无导入',
          page: {
            page: 1,
            total: 0,
            size: 10
          }
        },
        ssoid: this.$route.params.sid,
        importSuccess: 0,
        importFail: 0,
        importFailKey: '',
        importResVis: false,
        showTips: false
      }
    },
    mounted () {
      this.initPageData()
    },
    computed: {
      ...mapState({
        cusInfo: state => state.cusManage.cusInfo,
        cusTags: state => state.cusManage.customerTags,
        cusGroups: state => state.cusManage.customerGroups,
        tagList: state => state.cusManage.tagList,
        groupList: state => state.cusManage.groupList
      }),
      // 文件上传附加的头部
      headers () {
        return {
          UBToken: localStorage.getItem('UBToken')
        }
      }
    },
    methods: {
      ...mapActions(['getCustomerInfo', 'getCusTagsWithClass', 'searchTags', 'addCusTagByID', 'delCusTag', 'getGroupsInCus', 'addToStaticGroup', 'getCusGroups', 'delCusFromGroup', 'getCusSummary', 'importCusData', 'getCusDetail']),
      // 初始化页面数据
      initPageData () {
        this.getCusSummary(this.ssoid).then((res) => {
          this.recordDetail = res.data.data
        })
        this.getCusDetail({ ssoid: this.ssoid, page: this.recordTable.page.page, size: this.recordTable.page.size }).then((res) => {
          this.recordTable = res.data.data
          if (res.data.data.lastImportTime) {
            this.importTime = true
          }
        })
      },
      // 保留2位小数
      toDemical (num) {
        if (isNaN(parseFloat(num))) {
          return false
        }
        let f = Math.round(num * 100) / 100
        let s = f.toString()
        let rs = s.indexOf('.')
        if (rs < 0) {
          rs = s.length
          s += '.'
        }
        while (s.length <= rs + 2) {
          s += '0'
        }
        return s
      },
      handleRemove (file) {
        // console.log(file)
      },
      submitUpload () {
        this.$refs.upload.submit()
      },
      handleImport (response, file) {
        if (response.code === 1) {
          this.importSuccess = response.data.successImportNum
          this.importFail = response.data.importFailNum || 0
          this.importFailKey = response.data.importFailureKey
          this.importResVis = true
          /* this.$message({
            type: 'success',
            message: response.msgZ
          }) */
        } else {
          this.$message({
            type: 'info',
            message: response.msgZ
          })
        }
        this.getCusSummary(this.ssoid).then((res) => {
          this.recordDetail = res.data.data
        })
        this.getCusDetail({ ssoid: this.ssoid, page: this.recordTable.page.page, size: this.recordTable.page.size }).then((res) => {
          this.tbLoading = true
          if (res.data.code === 1) {
            this.tbLoading = false
            this.recordTable = res.data.data
            this.importTime = true
            this.tbLoading = false
          } else {
            this.$message({
              type: 'info',
              message: res.data.msgZ
            })
          }
        })
        /* let sid = this.cusInfo.baseInfo.ssoid
        this.importCusData({ssoid: sid, file: file}).then((res) => {
          console.log(res)
        }) */
      },
      // 分页
      handleSearchCount () {
        this.tbLoading = true
        this.getCusDetail({
          ssoid: this.ssoid,
          page: this.recordTable.page.current,
          size: this.recordTable.page.size
        }).then((res) => {
          this.recordTable = res.data.data
          this.tbLoading = false
        })
      },
      // 改变分页大小
      handleResSizeChange (size) {
        this.getCusDetail({
          ssoid: this.ssoid,
          page: this.recordTable.page.current,
          size: size
        }).then((res) => {
          this.recordTable = res.data.data
        })
      }
    }
  }
</script>
<style lang="scss">
  .head-nav{
    margin-top:-24px;height:50px;line-height:50px;border-bottom:1px solid #e0e6ed;
    a{
      color:#4d5c6e;font-weight:500;font-size:16px;display:inline-block;text-decoration: none;margin-left: 35px;
    }
    a:first-child{
      margin-left: 0;
    }
    a.cur,a:hover{
      color:#ff0000;
    }
  }
  .customer-detail{
    .navs{
      &{margin-top:20px;height:36px;line-height:36px;}
      .inner{padding:0 22px;background:#eff2f7;}
      .inner.fixed{position:fixed;top:0;margin-top:0;z-index:100}
      a{margin:0 20px;font-size:14px;color:#4c5b6d;text-decoration:none;cursor:pointer;}
      a.active{color:#fe4e4e}
    }
    h3{margin:30px 0 12px 20px;font-size:16px}
    .record-wrap{
      margin: 15px 0 0;
      h2{
        &{border: 1px solid #e0e6ed;padding: 15px;}
        .tips{float:right;font-size:14px;cursor:pointer;}
      }
      .btn-imex{
        margin: 12px 0;
        a{
          display: inline;
          text-decoration: none;
          color: #20a0ff;
          font-size: 14px;
        }
        .btn-import{
          display: inline-block;
          margin: 0 8px;
          button{
            font: 14px/1.5 microsoft yahei;
          }
          .el-upload-list{
            display: none;
          }
        }
        .btn-download{
          border: 1px solid #c2e7b0;
          color: #67c23a;
          padding: 8px 10px;
          border-radius: 4px;
        }
        .btn-download:hover{
          border-color: #67c23a;
          background: #67c23a;
          color: #fff;
        }
        .btn-export{
          border: 1px solid rgb(191, 203, 217);
          color: rgb(31, 45, 61);
          padding: 8px 10px;
          border-radius: 4px;
        }
        .btn-export:hover{
          border-color: #20a0ff;
          color: #20a0ff;
        }
      }
      .import-time{
        display:inline;
        margin-right: 30px;
      }
      .summary{
        border: 1px solid #e0e6ed;
        border-top: none;
        margin-bottom: 30px;
        section{
          width:20%;
          float: left;
          text-align: center;
          font-size: 16px;
          line-height: 30px;
          padding: 20px 0;
        }
      }
      .import-result{
        .sp{line-height: 30px;padding: 0 10px 10px 0;}
      }
      .btn-primary{
        text-decoration: none;
        font-size: 14px;
        color: rgb(31, 45, 61);
        height: 34px;
        line-height: 34px;
        display: inline-block;
        padding: 0 5px;
      }
      .btn-primary:hover{
        color: #20a0ff;
        border-color: #20a0ff;
      }
    }
    .dialog_tips{width:600px;line-height:2;}
  }
  .clearfix:after{display:block;content:'';height:0;clear:both;visibility:hidden;}
</style>
